import React from 'react';
import { Card } from 'antd';
import { ItemPanel, Item } from 'gg-editor';
import styles from './index.less';

const FlowItemPanel = () => {
  return (
    <ItemPanel className={styles.itemPanel}>
      <Card bordered={false}>
        <Item
          type="node"
          size="80*48"
          shape="start-node"
          model={{
            color: '#722ED1',
            label: '开始',
            des:"进入会话模块用来设置用户输入什么问题时会触发该多轮对话",
            title:"开始模块",
            modal:"start",
            width:80,
            height:48
          }}
          src="/ggeditor/flow/start.png"
        />

        <Item
          type="node"
          size="80*48"
          shape="centre-node"
          model={{
            color: 'red',
            label: '收集词槽',
            des:"收集词槽模块用来设置让机器人主动询问并收集词槽信息。比如询问用户的姓名、手机号、出发城市、出发时间等",
            title:"收集词槽模块",
            width:80,
            height:48,
            modal:"slot",
          }}
          src="/ggeditor/flow/collect.png"
        />
        <Item
          type="node"
          size="80*48"
          shape="centre-node"
          model={{
            color: 'orange',
            label: '信息确认',
            des:"信息确认模块用来和用户确认某些已经收集到或查询到的信息（比如订单信息），用户确认后跳出该模块继续进行后续的流程",
            title:"信息确认模块",
            width:80,
            height:48,
            modal:"confirm",
          }}
          src="/ggeditor/flow/information.png"
        />
        <Item
          type="node"
          size="80*48"
          shape="centre-node"
          model={{
            color: 'purple',
            label: '内容筛选',
            des:"内容筛选模块用来让用户从系统查询得到的多条数据中（比如机票或者商品等），进行多条件、多维度的筛选，最终选择一条自己需要的数据",
            title:"内容筛选模块",
            width:80,
            height:48,
            modal:"filter",
          }}
          src="/ggeditor/flow/screen.png"
        />
        <Item
          type="node"
          size="80*72"
          shape="flow-rhombus"
          model={{
            color: 'green',
            label: '触发条件',
            des:"触发条件模块用来设置，当会话满足了设定的条件时则进入该模块下面的处理流程。",
            title:"触发条件模块",
            width:94,
            height:48,
            modal:"case",
          }}
          src="/ggeditor/flow/trigger.png"
        />
        <Item
          type="node"
          size="72*72"
          shape="action-node"
          model={{
            color: '#FA8C16',
            label: '动作',
            des:"动作模块用来设置，当进行到该模块时自动执行所设定的动作，包括回复用户、调用API接口和清空词槽值",
            title:"动作模块",
            width:80,
            height:48,
            modal:"action",
          }}
          src="/ggeditor/flow/action.png"
        />
        <Item
          type="node"
          size="80*48"
          shape="end-node"
          model={{
            color: 'black',
            label: '结束',
            des:"结束模块代表会话进行到该模块时即结束当前多轮对话，每个流程分支的终结点都必须为结束模块",
            title:"结束模块",
            width:80,
            height:48,
            modal:"end",
          }}
          src="/ggeditor/flow/end.png"
        />
      </Card>
    </ItemPanel>
  );
};

export default FlowItemPanel;
